<template>
  <div class="hdbanner">
    <div class="card">
      <el-tooltip class="item" effect="dark" :content="showTitle" placement="top">
        <h2>{{ showTitle }}</h2>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" :content="showBody" placement="bottom">
        <p>{{ showBody }}</p>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: 'hdbanner',
  props: ['t', 'b'],
  data() {
    return {
      pageData: {
        short: [],
      },
      showTitle: '',
      showBody: '',
    }
  },
  watch: {
    t() {
      this.showTitle = this.t
    },
    b() {
      this.showBody = this.b
    }
  },
  mounted() {
    if (this.t && this.b) {
      // 传入模式
      this.showTitle = this.t
      this.showBody = this.b
    } else {
      // 随机模式
      // 一直请求 等待资源
      this.timer = setInterval(() => {
        if (this.$store.state.pageInfo) {
          this.pageData.short = this.$store.state.pageInfo.short
          this.showTitle = this.pageData.short.short[Math.floor(Math.random() * this.pageData.short.short.length)].title
          this.showBody = this.pageData.short.short[Math.floor(Math.random() * this.pageData.short.short.length)].body
          clearTimeout(this.timer)
        }
      }, 100);
    }
  }
}
</script>

<style lang="less"  scoped>
.hdbanner {
  background: url("~@/assets/static/img/banner.jpg");
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  align-items: flex-end;
  justify-content: center;


  width: 100%;
  height: 350px;

  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .card {
    padding: 20px 30px;
    background-color: hsla(0, 0%, 100%, .5);
    height: 180px;
    position: relative;
    width: 60%;
    z-index: 3;
    border-radius: 2px;
    color: rgba(0, 0, 0, .85);
    border: 1px solid #fff;

    // display: flex;
    justify-content: center;
    // align-items: center;
    flex-wrap: wrap;

    h2 {
      color: #fff;
      font-size: 32px;
      font-weight: 400;
      text-align: center;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    p {
      text-align: center;
      color: #fff;
      margin-top: 25px;
      font-size: 16px;
      width: 100%;
      font-size: 16px;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      line-height: 1.5em;
      font-weight: 300;

    }
  }

}
</style>